<template>
  <div class="login-container">
    <!-- 动态背景效果 -->
    <div class="particles-bg">
      <div v-for="i in 20" :key="i" class="particle" :style="particleStyle(i)"></div>
    </div>

    <!-- 登录卡片 -->
    <el-card class="login-card">
      <div class="logo-container">
        <div class="logo">
          <svg viewBox="0 0 100 100" class="logo-svg">
            <path d="M50,15 L75,50 L50,85 L25,50 Z" fill="#6a11cb" />
            <circle cx="50" cy="50" r="15" fill="#2575fc" />
          </svg>
        </div>
        <h2 class="login-title">系统登录</h2>
      </div>

      <el-form
        :model="loginForm"
        :rules="loginRules"
        ref="formRef"
        @submit.prevent="handleLogin"
        class="login-form"
      >
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            prefix-icon="User"
            size="large"
            class="input-item"
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            prefix-icon="Lock"
            show-password
            size="large"
            class="input-item"
          />
        </el-form-item>

        <div class="button-group">
          <el-button type="primary" class="login-btn" native-type="submit" :loading="loading">
            登 录
          </el-button>

          <el-button class="reset-btn" @click="handleReset"> 重 置 </el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { loginApi } from '@/api/login'

const router = useRouter()
const formRef = ref<FormInstance>()
const loading = ref(false)

// 登录表单数据
const loginForm = reactive({
  username: '',
  password: '',
})

// 表单验证规则
const loginRules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
  ],
})

// 粒子样式
const particleStyle = (index: number) => {
  const size = Math.random() * 5 + 2
  const posX = Math.random() * 100
  const posY = Math.random() * 100
  const animationDelay = Math.random() * 5
  const color = `hsl(${Math.random() * 360}, 70%, 60%)`

  return {
    width: `${size}px`,
    height: `${size}px`,
    left: `${posX}%`,
    top: `${posY}%`,
    backgroundColor: color,
    animationDelay: `${animationDelay}s`,
  }
}

// 处理登录提交
const handleLogin = async () => {
  // 表单验证
  const valid = await formRef.value?.validate()
  if (!valid) return

  loading.value = true
  try {
    // 调用登录API
    const result = await loginApi(loginForm)

    if (result.code === 1) {
      // 登录成功处理
      ElMessage.success('登录成功')

      // 存储token到localStorage
      localStorage.setItem('token', JSON.stringify(result.data))

      // 跳转到首页
      router.push('/index')
    } else {
      // 其他错误处理
      ElMessage.error(result.msg || '登录失败，请重试')
    }
  } catch (error: any) {
    // 401错误处理
    if (error.response?.status === 401) {
      ElMessage.error('用户名或密码错误')
    } else {
      ElMessage.error('登录请求失败：' + (error.message || '未知错误'))
    }
  } finally {
    loading.value = false
  }
}

// 处理重置表单
const handleReset = () => {
  formRef.value?.resetFields()
}
</script>

<style scoped lang="scss">
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

// 粒子背景效果
.particles-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;

  .particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.7;
    animation: float 15s infinite ease-in-out;
    filter: blur(1px);

    @keyframes float {
      0%,
      100% {
        transform: translate(0, 0);
      }
      25% {
        transform: translate(calc(100vw * 0.05), calc(100vh * 0.03));
      }
      50% {
        transform: translate(calc(100vw * 0.03), calc(100vh * 0.05));
      }
      75% {
        transform: translate(calc(100vw * -0.04), calc(100vh * -0.02));
      }
    }
  }
}

.login-card {
  width: 420px;
  padding: 40px 35px;
  border-radius: 20px;
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  z-index: 2;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateY(0);
  opacity: 1;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  .logo-container {
    text-align: center;
    margin-bottom: 30px;

    .logo {
      width: 80px;
      height: 80px;
      margin: 0 auto 15px;
      display: flex;
      align-items: center;
      justify-content: center;

      .logo-svg {
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 5px 15px rgba(106, 17, 203, 0.4));
      }
    }

    .login-title {
      text-align: center;
      margin-bottom: 5px;
      color: #fff;
      font-size: 24px;
      font-weight: 600;
      letter-spacing: 1px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
  }

  .login-form {
    .input-item {
      margin-bottom: 25px;

      :deep(.el-input__wrapper) {
        border-radius: 12px;
        box-shadow:
          0 4px 6px rgba(0, 0, 0, 0.1),
          inset 0 0 0 1px rgba(255, 255, 255, 0.1);
        padding: 0 18px;
        height: 50px;
        background: rgba(255, 255, 255, 0.08);
        transition: all 0.3s ease;

        .el-input__inner {
          color: #fff;
          font-size: 16px;
          &::placeholder {
            color: rgba(255, 255, 255, 0.5);
          }
        }

        .el-icon {
          color: rgba(255, 255, 255, 0.6);
          font-size: 18px;
          margin-right: 8px;
        }

        &:hover,
        &:focus-within {
          box-shadow:
            0 4px 12px rgba(37, 117, 252, 0.25),
            inset 0 0 0 1px rgba(255, 255, 255, 0.2);
          background: rgba(255, 255, 255, 0.12);
        }
      }
    }
  }

  .button-group {
    display: flex;
    gap: 15px;
    margin-top: 10px;

    .login-btn {
      flex: 1;
      height: 50px;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 1px;
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      border: none;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(37, 117, 252, 0.4);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 7px 20px rgba(37, 117, 252, 0.5);
        background: linear-gradient(135deg, #7a2bdb 0%, #3585ff 100%);
      }

      &:active {
        transform: translateY(1px);
      }
    }

    .reset-btn {
      flex: 1;
      height: 50px;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 1px;
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      }

      &:active {
        transform: translateY(1px);
      }
    }
  }
}
</style>
